<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		 *{
		 	margin: 0;
		 	padding: 0;
		 }
		 .nav{
		 	width: 100%;
		 	height: 50px;
		 	background: black;
		 }
		 .center{
		 	width: 90%;
		 	height: 100%;
		 	background: skyblue;
		 	margin: 0 auto;
		 }
		 .banner{
		 	width: 90%;
		 	margin: 0 auto;
		 	background: pink;
		 }
		 .content{
		 	background: hotpink;
		 }
		 .foot{
		 	width: 100%;
		 	background: blue;
		 }
	</style>
</head>
<body>
	<!-- 1.每个功能模块开始的地方加好注释
	     2.代码缩进 tab往右缩进 shift+tab左缩进
	     3.除非有固定高度，在没有明确高度的时候，不要设置高度，通过内容和设置内外边距把父元素撑起来
	     4.命名要求，做到见名知意（不要用拼音，a,b,c box1,box2） -->
    <!-- 导航开始 -->
    <div class="nav">
    	<div class="center">
    		<h1>导航区域</h1>
    	</div>
    </div>
    <!--  轮廓图 -->
    <div class="banner">
    	<h1>轮廓图</h1>
    	<h1>轮廓图</h1>
    	<h1>轮廓图</h1>
    	<h1>轮廓图</h1>
    	<h1>轮廓图</h1>
    </div>
    <!-- 内容区域 -->
    <div class="content center">
    	<h1>内容</h1>
    	<h1>内容</h1>
    	<h1>内容</h1>
    	<h1>内容</h1>
    	<h1>内容</h1>
    	<h1>内容</h1>
    	<h1>内容</h1>
    	<h1>内容</h1>
    	<h1>内容</h1>
    	<h1>内容</h1>
    	<h1>内容</h1>
    </div>
    <!-- 底部区域 -->
    <div class="foot">
    	<div class="center">
    		<h1>底部</h1>
    		<h1>底部</h1>
    		<h1>底部</h1>
    	</div>
    </div>
</body>
</html>